<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://codepen.io/susu-hu/pen/LYKqQvb</title>
</head>
<style>
    @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

    * {
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #fff;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    section {
        padding-block: min(20vh, 2rem);
        width: calc(min(76.5rem, 90%));
        margin-inline: auto;
        color: #111;
    }

    section h2 {
        text-transform: capitalize;
        letter-spacing: 0.025em;
        font-size: clamp(2rem, 1.8125rem + 0.75vw, 2.6rem);
    }

    section a {
        display: inline-block;
        text-decoration: none;
    }

    section .container {
        margin-top: 5em;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 2rem;
    }

    section .container .card:nth-child(1) .box .icon .iconBox {
        background: #d3b19a;
    }

    section .container .card:nth-child(2) .box .icon .iconBox {
        background: #70b3b1;
    }

    section .container .card:nth-child(3) .box .icon .iconBox {
        background: #d05fa2;
    }

    section .container .card ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.625rem;
    }

    section .container .card ul li {
        text-transform: uppercase;
        background: var(--clr-tag);
        color: #282828;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 0.375rem 0.625rem;
        border-radius: 0.188rem;
    }

    section .container .card ul .branding {
        color: #704a31;
    }

    section .container .card ul .packaging {
        color: #1e3938;
    }

    section .container .card ul .marketing {
        color: #4d1637;
    }

    section .container .card .content {
        padding: 0.938rem 0.625rem;
    }

    section .container .card .content h3 {
        text-transform: capitalize;
        font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
    }

    section .container .card .content p {
        margin: 0.625rem 0 1.25rem;
        color: #565656;
    }

    section .container .card-inner {
        position: relative;
        width: inherit;
        height: 18.75rem;
        background: var(--clr);
        border-radius: 1.25rem;
        border-bottom-right-radius: 0;
        overflow: hidden;
    }

    section .container .card-inner .box {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 1.25rem;
        overflow: hidden;
    }

    section .container .card-inner .box .imgBox {
        position: absolute;
        inset: 0;
    }

    section .container .card-inner .box .imgBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    section .container .card-inner .box .icon {
        position: absolute;
        bottom: -0.375rem;
        right: -0.375rem;
        width: 6rem;
        height: 6rem;
        background: var(--clr);
        border-top-left-radius: 50%;
    }

    section .container .card-inner .box .icon:hover .iconBox {
        transform: scale(1.1);
    }

    section .container .card-inner .box .icon::before {
        position: absolute;
        content: "";
        bottom: 0.375rem;
        left: -1.25rem;
        background: transparent;
        width: 1.25rem;
        height: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
    }

    section .container .card-inner .box .icon::after {
        position: absolute;
        content: "";
        top: -1.25rem;
        right: 0.375rem;
        background: transparent;
        width: 1.25rem;
        height: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr);
    }

    section .container .card-inner .box .icon .iconBox {
        position: absolute;
        inset: 0.625rem;
        background: #282828;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
    }

    section .container .card-inner .box .icon .iconBox span {
        color: #fff;
        font-size: 1.5rem;
    }
</style>

<body>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <section>
        <h2>leading companies<br />have trusted us</h2>
        <div class="container">
            <div class="card">
                <div class="card-inner" style="--clr:#fff;">
                    <div class="box">
                        <div class="imgBox">
                            <img src="https://images.unsplash.com/photo-1601049676869-702ea24cfd58?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="Trust & Co.">
                        </div>
                        <div class="icon">
                            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                                    arrow_outward
                                </span></a>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <h3>trust &amp; co.</h3>
                    <p>Fill out the form and the algorithm will offer the right team of experts</p>
                    <ul>
                        <li style="--clr-tag:#d3b19a;" class="branding">branding</li>
                        <li style="--clr-tag:#70b3b1;" class="packaging">packaging</li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-inner" style="--clr:#fff;">
                    <div class="box">
                        <div class="imgBox">
                            <img src="https://images.unsplash.com/photo-1613235788366-270e7ac489f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="Tonic">
                        </div>
                        <div class="icon">
                            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                                    arrow_outward
                                </span></a>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <h3>tonic</h3>
                    <p>Fill out the form and the algorithm will offer the right team of experts</p>
                    <ul>
                        <li style="--clr-tag:#d3b19a;" class="branding">branding</li>
                        <li style="--clr-tag:#d05fa2;" class="marketing">marketing</li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-inner" style="--clr:#fff;">
                    <div class="box">
                        <div class="imgBox">
                            <img src="https://images.unsplash.com/photo-1673847401561-fcd75a7888c5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="Shower Gel">
                        </div>
                        <div class="icon">
                            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                                    arrow_outward
                                </span></a>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <h3>shower gel</h3>
                    <p>Fill out the form and the algorithm will offer the right team of experts</p>
                    <ul>
                        <li style="--clr-tag:#d3b19a;" class="branding">branding</li>
                        <li style="--clr-tag:#70b3b1;" class="packaging">packaging</li>
                        <li style="--clr-tag:#d05fa2;" class="marketing">marketing</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>

</html>